<template>
    <div class="type-list-box">
        <div class="item"
        v-for="(item, index) in list" :key="index"
        :style="'width:'+ (100/num) + '%;'"
        @click=" goSearch(item.link) "
        >
            <div class="type-img">
                <img :src="item.image" alt />
                <!-- <img src="" alt=""> -->
            </div>
            <div class="type-name">{{ item.title }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        num:{
            type:Number,
            default:5
        },
        list:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    methods: {
        goSearch(link){
            // console.log(link);
            let params = {};
            let fcid = link.match(/fcid=([^&]*)/);
            if(fcid){
                params.fcid = fcid[1]
            }
            let title = link.match(/title=([^&]*)/);
            if(title){
                params.title = title[1]
            }else{
                params.title = name;
            }
            
            this.$router.push({
                path:"/search",
                query:params
            });

        },      
    },
}
</script>
<style lang="less" scoped>
.type-list-box{
    margin-top: 20px;

    @size:@padding-size / 2;

    display: flex;
    flex-flow: row wrap;
    padding: 0px @size;
    .item{
        // width: 100% / 5;
        text-align: center;
        padding: 0px @size;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .type-img{
        width: 100%;
        background-color: @cc;
        width: 100%;
        padding-top: 100%;
        height: 0px;
        position: relative;
        border-radius: 50%;
        > img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }
    .type-name{
        width: 100%;
        margin-top: 10px;
        font-size: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>